import React, { Component } from 'react';
import { Image, View } from 'react-native';
import { Container, Header, Content, Card, CardItem, Thumbnail, Text, Button, Icon, Left, Body } from 'native-base';
import moment from 'moment'

const Collection = (props) => {
  const { dataSource, dispatch, currentUser } = props
  const {
    log,
    collection
  } = dataSource
  console.log('test collection', dataSource)
  return (
    <View style={{
      margin: 10,
      borderRadius: 10,
      borderStyle: 'solid',
      elevation: 10
    }}
    >
      <CardItem>
        <Left>
          <Thumbnail source={{ uri: 'http://img06.tooopen.com/images/20160921/tooopen_sy_179583447187.jpg' }} />
          <Body>
            <Text>{currentUser.username}</Text>
            <Text note>April 15, 2016</Text>
          </Body>
        </Left>
      </CardItem>
      <CardItem>
        <Body>
          <Text numberOfLines={2}>
            {_.isNil(log) ? '' : `  ${log}`}
          </Text>
        </Body>
      </CardItem>
      <CardItem>
        <Left>
          <Button transparent textStyle={{ color: '#87838B' }}>
            <Icon name="heart" type="FontAwesome" />
            <Text>{collection.length} stars</Text>
          </Button>
        </Left>
      </CardItem>
    </View>
  )
}

export default Collection
